<div class="cil__base-block">
  <div class="cil__base-block--form">
    <nz-card [nzBordered]="false" [nzCover]="coverTemplate">
      <nz-card-meta [nzTitle]="'GENERAL.INFO.OPERATION_TIPS' | i18n" [nzDescription]="description"></nz-card-meta>
      <ng-template #description>
        <ul>
          <li>{{'MENUS.OPERATION.SUB_MENU_TOP_MENU' | i18n}}</li>
        </ul>
      </ng-template>
    </nz-card>

    <ng-template #coverTemplate>
      <nz-spin class="cil__tree--container" [nzSpinning]="isLoading">
        <nz-tree
          #tree
          nzCheckable
          nzShowLine
          [nzCheckedKeys]="defaultCheckedKeys"
          [nzExpandAll]="isExpandAll"
          [nzData]="nodes"
          (nzCheckBoxChange)="onCheckBoxChange($event)">
        </nz-tree>
      </nz-spin>
    </ng-template>

    <div class="cil__tree--footer">
      <button
        acl [acl-ability]="'api.put.camel.role.one.menus'"
        nz-button
        nzType="primary"
        (click)="save()">{{'BTN.SAVE' | i18n}}</button>
    </div>
  </div>
</div>